<template>
    <div class="edit-box" teleport="body">
        <h1>修改管理员信息</h1>
        <el-form :model="admin" label-width="120px">
            <el-form-item label="编号">
                <span>{{ admin.adminid }}</span>
            </el-form-item>
            <el-form-item label="姓名">
                <span>{{ admin.adminname }}</span>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="admin.password" />
            </el-form-item>
            <el-form-item label="角色">
                <el-radio-group v-model="admin.role">
                    <el-radio :label="1">超级管理员</el-radio>
                    <el-radio :label="2">普通管理员</el-radio>
                </el-radio-group>
            </el-form-item>
            <p class="one">
                <el-tree ref="tree" :data="data" show-checkbox node-key="id" highlight-current />

            </p>
            <el-form-item>
                <el-button type="primary" @click="saveFn">修改</el-button>
                <el-button type="primary" @click="cancelFn">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ElMessage,ElTree } from 'element-plus';
import { ref, reactive, watch } from 'vue';
import service from '../../../utils/service';
import { data as data } from '../../../Threedes/menudata'
import { TreeKey } from "element-plus/es/components/tree/src/tree.type";

const props = defineProps<{
    adminname: string
}>()
const emit = defineEmits<{
    (e: "showcart"): void,
    (e: "cartsussess"): void
}>();
const cancelFn = () => {
    // 触发隐藏事件
    emit("showcart");
}
interface listAdmin {
    "adminname": string,
    "password": string,
    "role": number,
    "adminid": string,
    "checkedKeys": TreeKey[]
}
const admin = reactive<listAdmin>({
    "adminid": '',
    "adminname": "",
    "password": "",
    "role": 1,
    "checkedKeys": []
})


const getAdminlist = () => {
    service({
        url: "/admin/detail",
        params: {
            adminname: props.adminname
        }
    }).then(res => {
        if (res.data.code === "200") {
            admin.adminid = res.data.data[0].adminid;
            admin.adminname = res.data.data[0].adminname;
            admin.role = res.data.data[0].role;
            admin.checkedKeys = res.data.data[0].checkedKeys;



        }

    })
}

watch(props, () => {
    getAdminlist();
    admin.password = "";
}, {
    deep: true
})
let treeRef = ref<InstanceType<typeof ElTree>>();

const saveFn = () => {
    let arr:TreeKey[] = treeRef.value!.getCheckedKeys(false)
    let arr2:TreeKey[] = treeRef.value!.getHalfCheckedKeys()
    arr = arr.concat(arr2)
    admin.checkedKeys = arr
    console.log(arr);
    service({
        url: "/admin/update",
        method: "post",
        data: {
            adminname: admin.adminname,
            password: admin.password,
            role: admin.role,
            checkedKeys: admin.checkedKeys
        }
    })
        .then(res => {
            if (res.data.code === "200") {
                ElMessage({
                    message: "修改成功！亲",
                    type: "success"
                })
                console.log(admin.checkedKeys);
                emit("showcart");//关掉自己
                emit("cartsussess");
            }
        })
}


</script>


<style scoped>
.edit-box {
    width: 500px;
    /* height: 500px; */
    margin: auto;
    border: 1px solid #e5e4e4;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ededed;
    z-index: 999;
}
.one{
    width: 300px;
    background-color: #ededed;
    display: flex;
    justify-content: center;
    align-content: center;
}
.el-tree{
    background-color: #ededed;
}
</style>